<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>短视频信息提取 - LLM Ready</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="输入短视频链接，快速提取视频标题、作者、封面等基础信息，支持主流平台，接口可对接AI应用。">
    <meta name="keywords" content="短视频, 信息提取, 视频解析, LLM, AI, 视频标题, 视频作者, 视频封面">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="header-inner">
            <div class="logo">
                <span class="logo-icon">🎬</span>
                <span class="logo-text">iztan</span>
            </div>
            <nav class="nav">
                <a href="#" class="nav-link active">首页</a>
                <a href="#" class="nav-link">API文档</a>
                <a href="#" class="nav-link">关于</a>
            </nav>
        </div>
    </header>
    <main>
        <div class="center-card" role="main">
            <h1 class="main-title">
                获取 <span class="highlight">短视频</span> 基本信息
            </h1>
            <p class="sub-title">
                输入任意短视频链接，快速提取视频标题、作者、封面等基础信息。支持主流平台，接口可对接AI应用。
            </p>
            <form class="input-row" id="video-form" autocomplete="off" onsubmit="return false;">
                <input id="video-url" type="text" placeholder="https://example.com/video/xxxx" autocomplete="off" aria-label="短视频链接">
                <button id="fetch-btn" type="submit">获取信息</button>
                <span id="loading" style="display:none;margin-left:8px;" aria-live="polite">⏳</span>
            </form>
            <!-- <div id="result" class="result-card" aria-live="polite">
                请输入短视频链接并点击“获取信息”
            </div> -->
        </div>
        <!-- 详情区域移到主体卡片外部 -->
        <section id="video-detail-section" class="video-detail-section" style="display:none;">
            <h2 class="detail-title">视频详细信息</h2>
            <div class="detail-content" id="video-detail-content">
                <!-- 这里将由 JS 动态填充视频详细信息 -->
            </div>
        </section>
    </main>
    <footer class="site-footer">
        &copy; 2024 短视频信息提取 | Powered by iztan
    </footer>
    <script src="js/main.js"></script>
</body>
</html>